<template>
  <div class="box">
    <div class="innerBox">
      <div class="left">
        <div class="content">
          <el-tabs v-model="activeName">
            <el-tab-pane label="题目" name="one"></el-tab-pane>
            <el-tab-pane label="答案" name="two"></el-tab-pane>
          </el-tabs>

          <template v-if="online">

            <div style="overflow-y: auto" v-if="activeName=='one'" v-html="anwit.itemBank&&anwit.itemBank.testItemContent">
            </div>
            <div style="overflow-y: auto"  v-if="activeName=='two'" v-html="anwit.answer">
            </div>
          </template>
          <template v-else>
            <el-image v-if="activeName=='two'" :preview-src-list="[detail.questionPicture,detail.answerPicture]"
                      :src="detail.questionPicture" alt="" fit="contain"></el-image>
            <el-image v-if="activeName=='one'" :preview-src-list="[detail.questionPicture,detail.answerPicture]"
                      :src="detail.answerPicture" alt="" fit="contain"></el-image>
          </template>
<!--          <el-image v-if="activeName=='one'" :preview-src-list="[detail.questionPicture,detail.answerPicture]"-->
<!--                    :src="detail.questionPicture" alt="" fit="contain"></el-image>-->
<!--          <el-image v-if="activeName=='two'" :preview-src-list="[detail.questionPicture,detail.answerPicture]"-->
<!--                    :src="detail.answerPicture" alt="" fit="contain"></el-image>-->
        </div>
      </div>
      <div class="right">
        <div class="top">

          <el-form ref="form" :model="form" class="elForm" inline label-width="80px">
            <div>
              <el-form-item label="考生">
                {{ detail.reserve3 }}
              </el-form-item>
              <el-form-item label="题目">
                <el-radio-group v-model="detail.result" disabled>
                  <el-radio label="yes">正确</el-radio>
                  <el-radio label="no">错误</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>


            <div style="overflow: auto;height: 100%">


              <div class="item">
                <div class="content">
                  <div v-for="item in count" class="itemInner">
                    <div>
                      {{ item.questionTypeName }}
                    </div>
                    <div>
                      <el-radio v-model="item.isNo" disabled label="yes"
                      >选项没问题了
                      </el-radio
                      >
                      <el-radio v-model="item.isNo" disabled label="no"
                      >我对这个选项有疑问
                      </el-radio
                      >
                    </div>
                  </div>

                </div>
              </div>
            </div>


          </el-form>
        </div>
        <div class="bottom">
          <div class="teacher">
            <el-form style="width: 100%">
              <el-form-item label="老师备注">{{ detail.teacherRemarks }}</el-form-item>
            </el-form>


          </div>
          <div id="bottomImage" style="text-align: center;margin-top: 20px ">
            <el-image v-if="detail.teacherPicture" :preview-src-list="[detail.teacherPicture]" :src="detail.teacherPicture"
                      fit="contain"></el-image>


          </div>
          <el-button style="height: 50px;" @click="setVisibles">进入答疑区</el-button>

        </div>
      </div>
    </div>

    <el-dialog @opened="scollTo" :visible.sync="visibles" custom-class="detailPc">
      <div style="width: 100%;height: 100%" id="messageScllTo">
        <template v-for="item in messageListData">
          <div class="messageRight" v-if="item.reserve1=='学生'">
            <div>
              <div style="display:flex;">
                <div>{{ item.createTime }}</div>
                <div style="margin-left: 10px">{{ item.replierUser.nickName }}</div>
              </div>
              <div>
                <div>{{ item.replyContent }}</div>
              </div>
            </div>
            <div>
              <el-avatar :size="60" :src="item.replierUser.avatar" @error="errorHandler">
                <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
              </el-avatar>
            </div>
          </div>
          <div class="messageLeft"  v-if="item.reserve1=='老师'">
            <div>
              <el-avatar :size="60" :src="item.replierUser.avatar" @error="errorHandler">
                <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
              </el-avatar>
            </div>
            <div>
              <div style="display:flex;">
                <div style="margin-right: 10px">{{ item.replierUser.nickName }}</div>
                <div>{{ item.createTime }}</div>
              </div>
              <div>
                <div>{{ item.replyContent }}</div>
              </div>
            </div>

          </div>
        </template>
        <el-input v-model="form.replyContent" :rows="4" placeholder="请输入内容" style="width: 100%;margin-top: 20px"
                  type="textarea"></el-input>
        <div style="display: flex;justify-content: flex-end;padding-top: 10px;width: 100%">
          <el-button type="primary" @click="submit">提交</el-button>
        </div>

      </div>

    </el-dialog>


  </div>
</template>
<script>
import {
  addPaperMarkingQA,
  base64ToUrl,
  getPaper,
  getPaperMarking,
  getPaperMarkingQA,
  teacherMarkPaper,
  getOnlineStudentAnswerDetail
} from "@/api/markingPapers";
import {listUser} from "@/api/system/user";
import {mapGetters} from "vuex";

export default {

  props: {
    id: {
      type: String,
    }
  },
  data() {
    return {
      detail: {},
      activeName: 'one',
      form: {
        replyContent: ''

      },
      userList: [],

      condition: [],
      index: null,
      typeTreeData: [],
      visibles: false,
      temporaryArray: null,
      defaultProps: {
        children: "children",
        label: "name",
        value: "id",
      },
      questionType: [],
      count: [],
      upImg: null,
      //弹框学情分析
      learnAnalyzePictures: '',
      options: [],
      labelClass: 'js',
      messageListData:[],
      online:false,
      anwit:{}
    }
  },
  mounted() {
    this.getMessageData()
    if(this.$route.query.type=='onLine'){
      this.getOnLineListData()
      this.online=true
    }else{
      this.getListData()

    }


  }
  ,updated() {
    //判断是否初始配置，若无则配置。
    if (!this.mathJax.isMathjaxConfig.bool) {
      this.mathJax.initMathjaxConfig();
    }
    this.$nextTick((_) => {
      //传入组件id，让组件被MathJax渲染
      this.mathJax.MathQueue("questionList-page");
    });
  },
  computed: {
    ...mapGetters(["baseUrl", 'userId','rolesId']),
  },
  watch: {
    visibles: function (n, o) {
      if (!n) {
        this.temporaryArray = [];
      }
    },
  },
  methods: {
    getListData() {
      getPaperMarking(this.$route.query.id).then(res => {
        this.detail = res.data
        this.count = res.data.jobTestPaperAndLabelList
      })
    },
    getOnLineListData(){
      getOnlineStudentAnswerDetail(this.$route.query.id).then(res => {
        this.detail = res.data
        this.anwit=res.data.studentTestAnswer
        this.count = res.data.jobTestPaperAndLabelList
      })
    },
    async getUserList() {
      let obj = {
        pageSize: 999,
        pageNum: 1,
      };
      await listUser(obj).then((res) => {
        if (res.code == 200) {
          this.userList = res.rows;
        }
      });
    },
    getMessageData() {
      getPaperMarkingQA(this.$route.query.id).then(res => {
        this.messageListData = res.rows
      })
    }
    ,
    submit() {
      this.form['jobTestPaperId'] = this.id
      this.form['replierId']=this.userId
      this.form['responderId']=this.rolesId.indexOf(102)>0?this.detail.teacherId:this.detail.studentId
      this.form['reserve1']=this.rolesId.indexOf(102)>=0?'学生':'老师'

      addPaperMarkingQA(this.form).then(res => {
        if (res.code == 200) {
          this.$message.success("保存成功");
          this.getMessageData()
          this.form.replyContent=''
        }
      })

    },


    //提交阅卷
    //生成试卷
    generateTestPapers() {
      if (this.form.topicTag == "") {
        this.$message.warning("请选择要生成试题的标签");
        return;
      }
      console.log(this.form)

      teacherMarkPaper(this.form).then(res => {
        if (res.code == 200) {
          this.$message.success("保存成功");
          this.$router.back(1)
        }
      })
    },
    errorHandler() {
      return true
    },
    setVisibles(){
      this.visibles=true

    },
    scollTo(){
      console.log('打开的回调')
      let box=document.querySelector('#messageScllTo')
      console.log(box)
      let scollHeight=box.scrollHeight
      box.scrollTo({
        top:scollHeight,
        behavior:'smooth'
      })
    }
  }
}
</script>
<style lang="scss">
.detailPc {
  width: 50%;
  height: 50%;
  min-width: 700px;
  min-height: 800px;
 .el-dialog__body{
    height: calc(100% - 30px);
    >div{
      height: 100%;
      overflow: auto;
    }
  }

  .messageRight{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    border-bottom: 1px solid #eee;
    >div{
      padding: 10px;
      text-align: right;
    }
  }
  .messageLeft{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1px solid #eee;
    >div{
      padding: 10px;
      text-align: left;
    }
  }
}
</style>

<style lang="scss" scoped>
.box {
  height: 100%;
  padding: 10px;
  min-width: 1000px;

  .innerBox {
    border: 1px solid #000;
    height: 100%;
    display: flex;

    > .left {
      flex: 1;
      border-right: 1px solid #000;
      padding: 10px;
      box-sizing: border-box;

      > .content {
        height: 100%;
        display: flex;
        flex-direction: column;

        .el-image {
          margin: 0 auto;
          flex: 1;
        }
      }


    }

    > .right {
      flex: 1;
      display: flex;
      flex-direction: column;

      > .top {
        border-bottom: 1px solid #000;
        flex: 1;
        min-height: 400px;
        padding: 10px;


        .item {
          min-height: 100px;
          border: #f1f3f8 1px solid;
          margin-bottom: 15px;
          padding: 5px;
          font-size: 14px;

          > div:nth-of-type(1) {
            font-size: 16px;
          }

          > .content {
            .itemInner {
              padding: 10px 0;
              display: flex;
              flex-direction: column;
              border-bottom: 1px #f1f3f8 solid;

              > div:nth-of-type(1) {
                align-self: flex-start;
                margin-bottom: 10px;
              }

              > div:nth-of-type(2) {
                ::v-deep .el-radio__label {
                  font-size: 12px;
                }
              }
            }
          }
        }
      }

      > .bottom {
        padding: 10px;
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: auto;

        > .title {
          font-size: 16px;
          font-weight: bold;
          text-align: center;
        }

      }

      .teacher {
        margin-top: 20px;
        display: flex;
        align-items: center;
        padding: 0 20px;
        flex-direction: column;


        > div {
          width: 100px;
          text-align: center;
        }

        .teacherBottom {
          height: 100%;
          background-color: red;

        }
      }
    }

  }
}

.elForm {
  height: calc(100% - 80px);

  > div:nth-of-type(1) {
    margin-top: 20px;
  }

  //
  //
  //.el-form-item {
  //  width: 40%;
  //  text-align: center;
  //}
}


.dialogAddTree {
  ::v-deep .el-dialog {
    min-width: 1070px;
  }

  .diaRight {
    flex: 1;
    overflow: auto;
    width: 100%;
    max-height: 800px;
    position: relative;

    .el-tree {
      width: max-content;
    }

    .label {
      display: none !important;
    }

    .custom-tree-node {
      display: flex;
      align-items: center;
    }

    .is-current {
      > .el-tree-node__content {
        .label {
          display: block !important;
        }
      }
    }
  }
}

</style>
